<template>
  <lay-layer v-model="visible" :shade="true" :shadeClose="false" shadeOpacity="0.2" :area="['500px', '600px']" :btn="action">
    <div style="padding: 20px">
      <lay-form :model="addSubMenuBo" ref="formRef">
        <lay-form-item label="菜单类型" prop="menuType" required>
          <lay-select class="search-input" v-model="addSubMenuBo.menuType" @change="changeMenuType" :allow-clear="true" placeholder="请选择">
            <lay-select-option value="d" label="目录"></lay-select-option>
            <lay-select-option value="m" label="菜单"></lay-select-option>
            <lay-select-option value="b" label="按钮"></lay-select-option>
          </lay-select>
        </lay-form-item>
        <lay-form-item label="菜单名" prop="menuName" required>
          <lay-input v-model="addSubMenuBo.menuName"></lay-input>
        </lay-form-item>
        <lay-form-item label="菜单代码" prop="menuCode" required>
          <lay-input v-model="addSubMenuBo.menuCode"></lay-input>
        </lay-form-item>
        <lay-form-item label="父级菜单" prop="parentCode" required>
          <lay-input :modelValue="parentMenuName + '（' + parentMenuCode + '）' " :disabled="true"></lay-input>
        </lay-form-item>
        <lay-form-item label="路由" prop="routeUrl" required>
          <lay-input v-model="addSubMenuBo.routeUrl"
                     :prefix-icon="disableItem.prefixIcon"
                     :placeholder="disableItem.tip"
                     :disabled="disableItem.bool"></lay-input>
        </lay-form-item>
        <lay-form-item label="图标" prop="menuIcon" mode="inline">
          <lay-icon-picker v-model="addSubMenuBo.menuIcon" type="layui-icon-face-smile" page showSearch></lay-icon-picker>
        </lay-form-item>
        <lay-form-item label="排序" prop="sort" mode="inline" required>
          <lay-input-number v-model="addSubMenuBo.sort" position="right"></lay-input-number>
        </lay-form-item>
        <lay-form-item label="描述" prop="note">
          <lay-input v-model="addSubMenuBo.note" placeholder="请输入描述" allow-clear></lay-input>
        </lay-form-item>
      </lay-form>
    </div>
  </lay-layer>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {addSubMenu} from "@/api/module/menu";
import useFxwForm from "@/hooks/useFxwForm";

const {changeVisible,visible,disableItem,changeMenuType,toReset} = useFxwForm()

const formRef = ref(null);
const emit = defineEmits(['refreshParent'])

const props = defineProps({
  parentMenuCode: {
    type: String,
    default: ""
  },
  parentMenuName: {
    type: String,
    default: ""
  }
});

const addSubMenuBo = ref({
  menuName: '',
  menuCode: '',
  parentCode: '',
  menuType: '',
  routeUrl: '',
  menuIcon: '',
  sort: 0,
  note:''
})

const action = ref([
  {
    text: "确认",
    callback: () => {
      addSubMenuBo.value.parentCode = props.parentMenuCode
      addSubMenu(addSubMenuBo.value).then(res=>{
        if (res.code === 200) {
          emit('refreshParent')
          toReset(formRef)
          changeVisible();
        }
      })
    }
  },
  {
    text: "重置",
    callback: () => {
      toReset(formRef)
    }
  },
  {
    text: "取消",
    callback: () => {
      changeVisible();
    }
  }
])

defineExpose({
  changeVisible
})

</script>

<style scoped>


</style>